<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/login.css" />
<!-- 引入jquery -->
<script type="text/javascript" 
	src="scripts/jquery.min.js">
</script>
<script type="text/javascript" 
	src="scripts/basevalue.js">
</script>
<script type="text/javascript" 
	src="scripts/cookie_util.js">
</script>
<script type="text/javascript" 
src="scripts/login.js"></script>
<script type="text/javascript">
	//主处理方法
	$(function() {
		//登陆功能事件绑定
		$("#login").click(userLogin);
		//登陆功能回车绑定
		$("#dl").keydown(enterLogin);
		//注册功能的事件绑定
		$("#regist_button").click(function(){
			//测试单击事件的绑定
			//alert("12222");
			//获取参数
			var name=$("#regist_username").val().trim();
			var nick=$("#nickname").val().trim();
			var password=$("#regist_password").val().trim();
			var final_password=$("#final_password").val().trim();
			//检查数据格式
			//检查用户
			//alert(name+","+nick+","+password+","+final_password)
			$("#warning_1 span").html("");
			$("#warning_2 span").html("");
			$("#warning_3 span").html("");
			var ok=true;
			if(name==""){
				ok=false;
				$("#warning_1 span").html("用户不能为空");
				$("#warning_1").show();//显示div消息区
			}
			//检测密码: 1-非空 2-不能小于6位
			if(password==""){
				ok=false;
				$("#warning_2 span").html("密码不能为空");
				$("#warning_2").show();
			}else if(password.length<6&&password.length>0){
				ok=false;
				$("#warning_2 span").html("密码不能小于6位");
				$("#warning_2").show();
			}
			//检测确认密码: 1-非空 2-是否与密码保持一致
			if(final_password!=password){
				ok=false;
				$("#warning_3 span").html("输入密码不一致");
				$("#warning_3").show();
			}
			if(ok){  //数据通过校验
				$.ajax({
					url:path+"/user/add.do",
					type:"post",
					data:{"name":name,"nick":nick,"password":password},
					dataType:"json",
					success:function(result){
						//注册成功
						if(result.status==0){
							alert(result.msg);
							////触发返回按钮的单击,返回到登录页面
							$("#back").click();
						}else if(result.status==1){
							//用户名被占用
							//alert(result.msg);
							$("#warning_1 span").html(result.msg);
							$("#warning_1").show();
						}
					},
					error:function(){
						alert("注册失败");
					}
				});
			}
		});
	});
</script>
</head>
<body>
	<div class="global">
		<div class="log log_in" tabindex='-1' id='dl'>
			<dl>
				<dt>
					<div class='header'>
						<h3>登&nbsp;录</h3>
					</div>
				</dt>
				<dt></dt>
				<dt>
					<div class='letter'>
						用户名:&nbsp;<input type="text" name="" id="count" tabindex='1' /> <span
							id="count_msg"></span>
					</div>
				</dt>
				<dt>
					<div class='letter'>
						密&nbsp;&nbsp;&nbsp;码:&nbsp;<input type="password" name=""
							id="password" tabindex='2' /> <span id="password_msg"></span>
					</div>
				</dt>
				<dt>
					<div>
						<input type="button" name="" id="login" value='&nbsp登&nbsp录&nbsp'
							tabindex='3' /> <input type="button" name="" id="sig_in"
							value='&nbsp注&nbsp册&nbsp' tabindex='4' />
					</div>
				</dt>
			</dl>
		</div>
		<div class="sig sig_out" tabindex='-1' id='zc'
			style='visibility: hidden;'>
			<dl>
				<dt>
					<div class='header'>
						<h3>注&nbsp;册</h3>
					</div>
				</dt>
				<dt></dt>
				<dt>
					<div class='letter'>
						用户名:&nbsp;<input type="text" name="" id="regist_username"
							tabindex='5' />
						<div class='warning' id='warning_1'>
							<span>该用户名不可用</span>
						</div>
					</div>
				</dt>
				<dt>
					<div class='letter'>
						昵&nbsp;&nbsp;&nbsp;称:&nbsp;<input type="text" name=""
							id="nickname" tabindex='6' />
					</div>
				</dt>
				<dt>
					<div class='letter'>
						密&nbsp;&nbsp;&nbsp;码:&nbsp;<input type="password" name=""
							id="regist_password" tabindex='7' />
						<div class='warning' id='warning_2'>
							<span>密码长度过短</span>
						</div>
					</div>
				</dt>
				<dt>
					<div class='password'>
						&nbsp;&nbsp;&nbsp;确认密码:&nbsp;<input type="password" name=""
							id="final_password" tabindex='8' />
						<div class='warning' id='warning_3'>
							<span>密码输入不一致</span>
						</div>
					</div>
				</dt>
				<dt>
					<div>
						<input type="button" name="" id="regist_button"
							value='&nbsp注&nbsp册&nbsp' tabindex='9' /> <input type="button"
							name="" id="back" value='&nbsp返&nbsp回&nbsp' tabindex='10' />
					</div>
					<script type="text/javascript">
						function get(e) {
							return document.getElementById(e);
						}
						get('sig_in').onclick = function() {
							get('dl').className = 'log log_out';
							get('zc').className = 'sig sig_in';
						}
						get('back').onclick = function() {
							get('zc').className = 'sig sig_out';
							get('dl').className = 'log log_in';
						}
						window.onload = function() {
							var t = setTimeout(
									"get('zc').style.visibility='visible'", 800);
							get('final_password').onblur = function() {
								var npassword = get('regist_password').value;
								var fpassword = get('final_password').value;
								if (npassword != fpassword) {
									get('warning_3').style.display = 'block';
								}
							}
							get('regist_password').onblur = function() {
								var npassword = get('regist_password').value.length;
								if (npassword<6&&npassword>0) {
									get('warning_2').style.display = 'block';
								}
							}
							get('regist_password').onfocus = function() {
								get('warning_2').style.display = 'none';
							}
							get('final_password').onfocus = function() {
								get('warning_3').style.display = 'none';
							}
						}
					</script>
				</dt>
			</dl>
		</div>
	</div>
</body>
</html>